import { Modal, Form, message } from 'antd';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { modifyPassword } from '@/services/system/user';

const SystemUserPassword= (props) => {
  const [form] = Form.useForm();
  const { formVisible, onCancel, values } = props;

  const okHandle = async () => {
    const fieldsValue = await form.validateFields();
    const formValue = { ...values, ...fieldsValue };

    const data = await modifyPassword(formValue);

    if (data.success) {
      message.success('修改密码成功!');
      onCancel()
    } else {
      message.error(data.msg);
    }
  }

  const validatorPassword = (rule, value, callback) => {
    if (value && form.getFieldValue('newPassword') !== form.getFieldValue('confirmPassword')) {
      callback("新设密码与确认密码不一致");
    } else {
      callback();
    }
  }

  return (
    <Modal
      destroyOnClose
      title={'修改用户登陆密码'}
      visible={formVisible}
      onOk={okHandle}
      onCancel={onCancel}
    >
      <ProForm 
        form={form} submitter={false}
        layout={'horizontal'} labelCol= { {span: 4} } wrapperCol= { {span: 20} }
      >
        {/* <ProFormText.Password  name="oldPassword" label="原始密码" 
          rules={[{ required: true, message: '请输入原始密码!' }, {max: 20, message: '密码过长!'}, {min: 6, message: '登陆密码最短6位!'}]}/> */}
        <ProFormText.Password  name="newPassword" label="新设密码" 
          rules={[{ required: true, message: '请输入新设密码!' }, {max: 20, message: '密码过长!'}, {min: 6, message: '登陆密码最短6位!'}]}/>
        <ProFormText.Password  name="confirmPassword" label="确认密码" 
          rules={[{ required: true, message: '请输入确认密码!' }, {max: 20, message: '密码过长!'}, {min: 6, message: '登陆密码最短6位!'}, { validator: validatorPassword }]}/>
      </ProForm>
    </Modal>
  );
};

export default SystemUserPassword;